<!DOCTYPE HTML>
<html lang="zh">
<head>
	<title>工作流程图</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

  <div class="top-panel">
      <img src="img/logo-drone-1.png">
      <h2><b>UAV Drag Platform</b></h2>
    <div class="top-right-panel">
        <input type="button" class="fl-btn" id="new-text" value="测试">
      <input type="button" class="fl-btn" id="text-chart-align" value="对齐">
      <input type="button" class="fl-btn" id="chart-save" value="保存">
      <input type="button" class="fl-btn" id="btn-object" value="部件">
    </div>
  </div>

  <div class="chart-content">

    <div id="chart-container" class="chart-design droppable canvas" style="width: 80%;height: 510px">

      <div id="xycoordinates"></div>
      <div id="cordiv" style="float:left;width:100%;height:519px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">
      </div>

    </div>
    <div class="chart-right-panel">
      <div class="chart-right-list">
        <div class="chart-right-list-flag" style="display:none;visibility:hidden;">object</div>
        <div class="chart-list chart-object">
          <h4>机型</h4>
          <div class="list-content">
              <div class="area">
                <div class="draggable" id="rect">
                  <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1515663869016" class="icon" style="" viewBox="0 0 1078 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3688" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="30"><defs><style type="text/css"></style></defs><path d="M597.057 576.269l-181.362 171.49 27.323 198.793-68.46 69.706-128.462-207.502L20.03 654.652l67.712-69.428 208.527 41.06 170.347-189.479L17.454 270.387l117.233-119.42 498.864 96.84 165.96-166.03C850.136 30.572 901.62 2.364 944.47 2.364c24.105 0 44.928 8.768 61.888 26.062 9.714 9.848 26.126 31.395 26.82 64.975 0.91 44.027-25.08 93.3-77.245 146.45l-167.4 167.323 85.6 494.48-117.798 119.983-159.28-445.368z m178.637 357.103l46.917-47.716-85.718-494.843L921.891 206.03c59.987-61.11 78.77-114.921 50.219-143.922-8.238-8.335-17.901-12.39-29.539-12.39-16.478 0-52.566 8.558-109.147 65.87L649.41 299.811l-498.637-96.873-47.325 48.225 445.955 165.295L313.726 678.6l-183.411-36.126-9.696 22.683 164.892 116.08 79.738 128.735 23.209-8.358-23.637-171.735 252.662-238.914 158.21 442.408z" fill="#5CACF0" p-id="3689"></path><path d="M598.749 569.198l-187.27 177.076 27.334 198.885-63.543 64.7-126.237-203.911-222.848-151.91 62.902-64.497 208.63 41.079 175.768-195.508L24.59 268.792l111.437-113.515 498.842 96.837L802.322 84.586C852.23 34.106 902.69 6.338 944.47 6.338c22.998 0 42.865 8.367 59.05 24.87 9.327 9.455 25.017 30.07 25.683 62.274 0.888 42.918-24.723 91.23-76.108 143.584L784.267 405.82l85.603 494.501-111.926 114.004L598.75 569.198z m175.336 371.48l52.79-53.689-85.713-494.822L924.7 208.844c61.73-62.884 80.512-118.78 50.243-149.523-9.034-9.143-19.615-13.576-32.37-13.576-17.099 0-54.38 8.711-111.977 67.052L648.092 295.506l-498.66-96.876-53.118 54.13 446.22 165.394-230.256 256.109-184.354-36.312-12.226 28.602 166.86 117.467 81.007 130.783 29.269-10.541-23.797-172.9L615.79 498.034l158.295 442.643z" fill="#5CACF0" p-id="3690"></path></svg>
                </div>
                <div class="draggable roundedRect" id="roundedRect">
                  <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1515663869016" class="icon" style="" viewBox="0 0 1078 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3688" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="30"><defs><style type="text/css"></style></defs><path d="M597.057 576.269l-181.362 171.49 27.323 198.793-68.46 69.706-128.462-207.502L20.03 654.652l67.712-69.428 208.527 41.06 170.347-189.479L17.454 270.387l117.233-119.42 498.864 96.84 165.96-166.03C850.136 30.572 901.62 2.364 944.47 2.364c24.105 0 44.928 8.768 61.888 26.062 9.714 9.848 26.126 31.395 26.82 64.975 0.91 44.027-25.08 93.3-77.245 146.45l-167.4 167.323 85.6 494.48-117.798 119.983-159.28-445.368z m178.637 357.103l46.917-47.716-85.718-494.843L921.891 206.03c59.987-61.11 78.77-114.921 50.219-143.922-8.238-8.335-17.901-12.39-29.539-12.39-16.478 0-52.566 8.558-109.147 65.87L649.41 299.811l-498.637-96.873-47.325 48.225 445.955 165.295L313.726 678.6l-183.411-36.126-9.696 22.683 164.892 116.08 79.738 128.735 23.209-8.358-23.637-171.735 252.662-238.914 158.21 442.408z" fill="#5CACF0" p-id="3689"></path><path d="M598.749 569.198l-187.27 177.076 27.334 198.885-63.543 64.7-126.237-203.911-222.848-151.91 62.902-64.497 208.63 41.079 175.768-195.508L24.59 268.792l111.437-113.515 498.842 96.837L802.322 84.586C852.23 34.106 902.69 6.338 944.47 6.338c22.998 0 42.865 8.367 59.05 24.87 9.327 9.455 25.017 30.07 25.683 62.274 0.888 42.918-24.723 91.23-76.108 143.584L784.267 405.82l85.603 494.501-111.926 114.004L598.75 569.198z m175.336 371.48l52.79-53.689-85.713-494.822L924.7 208.844c61.73-62.884 80.512-118.78 50.243-149.523-9.034-9.143-19.615-13.576-32.37-13.576-17.099 0-54.38 8.711-111.977 67.052L648.092 295.506l-498.66-96.876-53.118 54.13 446.22 165.394-230.256 256.109-184.354-36.312-12.226 28.602 166.86 117.467 81.007 130.783 29.269-10.541-23.797-172.9L615.79 498.034l158.295 442.643z" fill="#5CACF0" p-id="3690"></path></svg>
                </div>
                <div class="draggable circle" id="circle">
                  <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1515663869016" class="icon" style="" viewBox="0 0 1078 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3688" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="30"><defs><style type="text/css"></style></defs><path d="M597.057 576.269l-181.362 171.49 27.323 198.793-68.46 69.706-128.462-207.502L20.03 654.652l67.712-69.428 208.527 41.06 170.347-189.479L17.454 270.387l117.233-119.42 498.864 96.84 165.96-166.03C850.136 30.572 901.62 2.364 944.47 2.364c24.105 0 44.928 8.768 61.888 26.062 9.714 9.848 26.126 31.395 26.82 64.975 0.91 44.027-25.08 93.3-77.245 146.45l-167.4 167.323 85.6 494.48-117.798 119.983-159.28-445.368z m178.637 357.103l46.917-47.716-85.718-494.843L921.891 206.03c59.987-61.11 78.77-114.921 50.219-143.922-8.238-8.335-17.901-12.39-29.539-12.39-16.478 0-52.566 8.558-109.147 65.87L649.41 299.811l-498.637-96.873-47.325 48.225 445.955 165.295L313.726 678.6l-183.411-36.126-9.696 22.683 164.892 116.08 79.738 128.735 23.209-8.358-23.637-171.735 252.662-238.914 158.21 442.408z" fill="#5CACF0" p-id="3689"></path><path d="M598.749 569.198l-187.27 177.076 27.334 198.885-63.543 64.7-126.237-203.911-222.848-151.91 62.902-64.497 208.63 41.079 175.768-195.508L24.59 268.792l111.437-113.515 498.842 96.837L802.322 84.586C852.23 34.106 902.69 6.338 944.47 6.338c22.998 0 42.865 8.367 59.05 24.87 9.327 9.455 25.017 30.07 25.683 62.274 0.888 42.918-24.723 91.23-76.108 143.584L784.267 405.82l85.603 494.501-111.926 114.004L598.75 569.198z m175.336 371.48l52.79-53.689-85.713-494.822L924.7 208.844c61.73-62.884 80.512-118.78 50.243-149.523-9.034-9.143-19.615-13.576-32.37-13.576-17.099 0-54.38 8.711-111.977 67.052L648.092 295.506l-498.66-96.876-53.118 54.13 446.22 165.394-230.256 256.109-184.354-36.312-12.226 28.602 166.86 117.467 81.007 130.783 29.269-10.541-23.797-172.9L615.79 498.034l158.295 442.643z" fill="#5CACF0" p-id="3690"></path></svg>
                </div>
                <div class="draggable rhombus" id="rhombus">
                  <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1515663869016" class="icon" style="" viewBox="0 0 1078 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3688" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><defs><style type="text/css"></style></defs><path d="M597.057 576.269l-181.362 171.49 27.323 198.793-68.46 69.706-128.462-207.502L20.03 654.652l67.712-69.428 208.527 41.06 170.347-189.479L17.454 270.387l117.233-119.42 498.864 96.84 165.96-166.03C850.136 30.572 901.62 2.364 944.47 2.364c24.105 0 44.928 8.768 61.888 26.062 9.714 9.848 26.126 31.395 26.82 64.975 0.91 44.027-25.08 93.3-77.245 146.45l-167.4 167.323 85.6 494.48-117.798 119.983-159.28-445.368z m178.637 357.103l46.917-47.716-85.718-494.843L921.891 206.03c59.987-61.11 78.77-114.921 50.219-143.922-8.238-8.335-17.901-12.39-29.539-12.39-16.478 0-52.566 8.558-109.147 65.87L649.41 299.811l-498.637-96.873-47.325 48.225 445.955 165.295L313.726 678.6l-183.411-36.126-9.696 22.683 164.892 116.08 79.738 128.735 23.209-8.358-23.637-171.735 252.662-238.914 158.21 442.408z" fill="#5CACF0" p-id="3689"></path><path d="M598.749 569.198l-187.27 177.076 27.334 198.885-63.543 64.7-126.237-203.911-222.848-151.91 62.902-64.497 208.63 41.079 175.768-195.508L24.59 268.792l111.437-113.515 498.842 96.837L802.322 84.586C852.23 34.106 902.69 6.338 944.47 6.338c22.998 0 42.865 8.367 59.05 24.87 9.327 9.455 25.017 30.07 25.683 62.274 0.888 42.918-24.723 91.23-76.108 143.584L784.267 405.82l85.603 494.501-111.926 114.004L598.75 569.198z m175.336 371.48l52.79-53.689-85.713-494.822L924.7 208.844c61.73-62.884 80.512-118.78 50.243-149.523-9.034-9.143-19.615-13.576-32.37-13.576-17.099 0-54.38 8.711-111.977 67.052L648.092 295.506l-498.66-96.876-53.118 54.13 446.22 165.394-230.256 256.109-184.354-36.312-12.226 28.602 166.86 117.467 81.007 130.783 29.269-10.541-23.797-172.9L615.79 498.034l158.295 442.643z" fill="#5CACF0" p-id="3690"></path></svg>
                </div>
              </div>
          </div>

          <!--<h4>当前坐标</h4>-->
          <!--<div class="list-content">-->
            <!--<div class="lo-xy-display">-->
              <!--<label>顶边:</label><input id="lo-x-display" type="text" class="chart-location-form" value="0" width="40">-->
              <!--<p></p>-->
              <!--<label>左边:</label><input id="lo-y-display" type="text" class="chart-location-form" value="0" width="40">-->
              <!--<p></p>-->
              <!--<label>飞行高度:</label><input id="chart-flight-height-display" type="text" class="chart-location-form" value="0" width="40">-->
              <!--<p></p>-->
              <!--<label>飞行速度:</label><input id="chart-flight-speed-display" type="text" class="chart-location-form" value="0" width="40">-->
            <!--</div>-->
          <!--</div>-->

          <h4>参数设置</h4>
          <div class="list-content">
            <div class="lo-xy-display chart-size-border-display">
              <label>宽度:</label><input id="chart-width-display" type="number" class="chart-location-form" value="0" width="40">
              <p></p>
              <label>高度:</label><input id="chart-height-display" type="number" class="chart-location-form" value="0" width="40">
              <p></p>
              <label>圆角:</label><input id="chart-border-display" type="number" class="chart-location-form" value="0" width="40">
            </div>
          </div>

          <!--<h4>填充</h4>-->
          <!--<div class="list-content">-->
            <!--<div class="lo-xy-display chart-fill-display">-->
              <!--<label>填充色:</label><input id="chart-background-color-display" type="color" class="chart-location-form" value="0" width="40">-->
              <!--<p></p>-->
              <!--<label>渐近:</label><input id="chart-blur-range-display" type="range" class="chart-location-form" value="0" max="50" min="0" width="40">-->
              <!--<p></p>-->
              <!--<label class="label-flag-color">渐近色:</label><input id="chart-fill-blur-color-display" type="color" class="chart-location-form" value="0" width="40">-->
            <!--</div>-->
          <!--</div>-->

          <h4>线框</h4>
          <div class="list-content">
            <div class="lo-xy-display chart-fill-border-display">
              <label>样式:</label>
              <select class="chart-fill-border-selector">
                <option value="none">无线框</option>
                <option value="solid">实线框</option>
                <option value="dashed">虚线框</option>
                <option value="dotted">点线框</option>
                <option value="double">双线框</option>
              </select>
              <p></p>
              <label>线粗:</label><input id="chart-fill-border-width-display" type="number" class="chart-location-form" value="0" width="40">
              <p></p>
              <label>线颜色:</label><input id="chart-fill-border-color-display" type="color" class="chart-location-form" value="0" width="40">
            </div>
          </div>

          <!--<h4>阴影</h4>-->
          <!--<div class="list-content">-->
            <!--<div class="lo-xy-display chart-shadow-display">-->
              <!--<label>水平阴影:</label><input id="chart-h-shadow-display" type="range" class="chart-location-form" value="0" width="40" min="-100" max="100">-->
              <!--<p></p>-->
              <!--<label>垂直阴影:</label><input id="chart-v-shadow-display" type="range" class="chart-location-form" value="0" width="40" min="-100" max="100">-->
              <!--<p></p>-->
              <!--<label>模糊距离:</label><input id="chart-shadow-blur-display" type="range" class="chart-location-form" value="0" width="40" min="-100" max="100">-->
              <!--<p></p>-->
              <!--<label>阴影尺寸:</label><input id="chart-shadow-spread-display" type="range" class="chart-location-form" value="0" width="40" min="-100" max="100">-->
              <!--<p></p>-->
              <!--<label>阴影颜色:</label><input id="chart-shadow-color-display" type="color" class="chart-location-form" value="0" width="40" min="-100" max="100">-->
            <!--</div>-->
          <!--</div>-->

          <h4>链路连线设置</h4>
          <div class="list-content">
            <div class="lo-xy-display chart-fill-border-display">
              <label>样式:</label>
              <select class="chart-fill-line-type-selector">
                <!--<option value="Bezier">曲线</option>-->
                <option value="Straight">直线</option>
                <!--<option value="Flowchart">折线</option>-->
              </select>
              <p></p>
              <label>线颜色:</label>
              <input id="chart-fill-line-color-display" type="color" class="chart-location-form" value="0" width="40">
              <p></p>
              <label>阈值:</label><input id="chart-threshold-display" type="number" class="chart-location-form" value="200" width="40">

            </div>
          </div>

        </div>

        <div class="chart-list chart-text" style="display:none;">
          <h4>字体</h4>
          <div class="list-content">
            <div class="chart-font-display">
              <label>字体名称:</label><input id="chart-font-display" type="text" class="chart-location-form" value="微软雅黑" width="40">
              <p></p>
              <label>字体大小:</label><input id="chart-font-size-display" type="number" class="chart-location-form" value="14" width="40">
              <p></p>
              <label>字体颜色:</label><input id="chart-font-color-display" type="color" class="chart-location-form" value="rgb(0,0,0)" width="40">
              <p></p>
              <label>字体样式:</label>
                <input type="button" class="fl-btn fl-font-style" id="B" style="font-weight:bold" value="B">
                <input type="button" class="fl-btn fl-font-style fl-font-style-both" id="I" style="font-style:italic" value="I">
                <input type="button" class="fl-btn fl-font-style fl-font-style-right" id="U" style="text-decoration:underline" value="U">
            </div>
          </div>
          <h4>对齐</h4>
          <div class="list-content">
            <div class="chart-font-display">
              <label>对齐方式:</label>
                <input id="chart-align-display" type="text" style="display:none;" class="chart-location-form" value="居中" width="40">
                <input type="button" class="fl-btn fl-align-style" id="btn-align-left" value="左">
                <input type="button" class="fl-btn fl-align-style fl-align-style-both" id="btn-align-center" value="中">
                <input type="button" class="fl-btn fl-align-style fl-align-style-both" id="btn-align-right" value="右">
                <input type="button" class="fl-btn fl-align-style fl-align-style-right" id="btn-align-none" value="无">
              <p></p>
              <label>文字高度:</label><input id="chart-font-height-display" type="Number" class="chart-location-form" value="0" width="40">
              <p></p>
              <label>文字间距:</label><input id="chart-font-spacing-display" type="Number" class="chart-location-form" value="0" width="40">
              <p></p>
            </div>
          </div>
          <h4>JSON</h4>
          <div class="list-content">
            <div class="chart-font-display">
              <label>JSON数据:</label><textarea id="json-display-area"></textarea>
              <p></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="chart-ratio">
      <input id="rear-ratio" class="chart-ratio-form" value="100" min="50" max="300" placeholder="10" type="range" onchange="ratioDisplay()" step="10">
      <div class="rare-ratio">
        <input id="rear-ratio-display" class="chart-ratio-form" value="100" width="40" min="50" max="300" placeholder="10" type="number" onchange="ratioDisplay2()" step="10">
      </div>
      <div class="chart-ratio-cover"></div>
    </div>

    <div class="line-select" id="align-select-div" style="display:none">
    <div class="chart-list chart-stylex">
      <h4 class="top-menu-selector" id="align-left">居左</h4>
      <h4 class="top-menu-selector" id="align-center">居中</h4>
      <h4 class="top-menu-selector" id="align-right">居右</h4>
    </div>
    </div>
  </div>

  <div class="save-form" style="display:none">
    <div class="save-heading">保存</div>
    <div class="save-json">
      <h5>保存为json:</h5>
      <div class="save-json-href"></div>
      <!--<textarea id="save-json-form-display"></textarea>-->
    </div>
    <div class="save-img">
      <h5>保存为图片:</h5>
      <div class="save-img-href"></div>
    </div>
  </div>

  <script src="external/jquery/jquery.js"></script>
  <script src="js/jquery-ui.js"></script>
  <script src="js/jquery.jsPlumb-1.4.0-all.js"></script>
  <script src="js/html2canvas.js"></script>

  <script type="text/javascript">

      //标识右侧工具栏是否已显示,默认显示
      sessionStorage['rightToolsIsDisplay']=true;

      //标识当前点击的流程图框,默认为none
      sessionStorage['currentChartSelected']='none';

      //栈,记录用户操作的先后顺序,用来进行撤销操作,数据结构为JSON,其中的copy用来复制部件
      //是个二维栈,包括新增/删除/粘贴操作
      var chartOperationStack=new Array;
      chartOperationStack['add']=[];
      chartOperationStack['delete']=[];
      chartOperationStack['paste']=[];
      chartOperationStack['copy']=[];

      //记录用户具体操作,有copy,add,delete,paste
      var chartRareOperationStack=new Array;

      //记录当前流程框的数量
      sessionStorage['currentChartAmount']=0;


      //鼠标放在画布上显示坐标
      function cnvs_getCoordinates(e){
          x=e.clientX;
          y=e.clientY;
          document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
      }

      //鼠标离开画布上坐标消失
      function cnvs_clearCoordinates(){
          document.getElementById("xycoordinates").innerHTML="";
      }

      //指定流程图设计区域宽度高度
      function adjustDesignWidth(){
          var designWidth=0;
          var domWidth=$(window).width();

          designWidth=domWidth-$('.chart-right-panel').width();
          $('.chart-design').css('width',designWidth-4);
      }

      //对页面进行缩小或放大
      function setZoom(instance,scale,container){
          //jsPlumb.setContainer("chart-container");
          $("#"+container).css({
              "-webkit-transform":"scale("+scale+")",
              "-moz-transform":"scale("+scale+")",
              "-ms-transform":"scale("+scale+")",
              "-o-transform":"scale("+scale+")",
              "transform":"scale("+scale+")",
              "TransformOrigin":"0% 0%"
          });
          instance.setZoom(scale);
      }

      //滑动条改变时触发的事件
      function ratioDisplay(){
          var chartRatioDom=document.getElementById('rear-ratio');
          var chartRatioDisplayDom=document.getElementById('rear-ratio-display');
          chartRatioDisplayDom.value=chartRatioDom.value;
          setZoom(jsPlumb,chartRatioDom.value/100,'chart-container');
          $('#chart-container').css({
              'left':'0px',
              'right':'180px'
          });
      }

      //大小选择框值改变时触发
      function ratioDisplay2(){
          var chartRatioDisplayDom=document.getElementById('rear-ratio-display');
          var chartRatioDom=document.getElementById('rear-ratio');
          chartRatioDom.value=chartRatioDisplayDom.value;
          setZoom(jsPlumb,chartRatioDisplayDom.value/100,'chart-container');
          $('#chart-container').css({
              'left':'0px',
              'right':'180px'
          });
      }

      //设置右边属性栏当前显示的是哪个工具(object/text/style)
      function setChartRightListFlag(value){
          $('.chart-right-list-flag').html(value);
      }

      //获得当前右边属性栏当前显示的是哪个工具(object/text/style)
      function getChartRightListFlag(){
          return $('.chart-right-list-flag').html();
      }

      //负责属性面板的切换,
      //参数will代表即将要切换的属性面板[text|object|style]
      //参数current代表当前属性面板,可由getChartRightListFlag()获得
      function attrToggle(will,current){
          if(sessionStorage['rightToolsIsDisplay']=='false'){
              $('.chart-right-panel').show();
              sessionStorage['rightToolsIsDisplay']=true;
              if(current!=will){
                  $('.chart-design').css("right","230px");
                  $(".chart-"+current).hide();
                  $('.chart-'+will).fadeIn();
                  setChartRightListFlag(will);
              }
              $('.chart-design').css("right","230px");
          }else{
              $('.chart-right-panel').hide();
              sessionStorage['rightToolsIsDisplay']=false;
              //递归调用切换属性面板函数
              attrToggle(will,current);
              $('.chart-design').css("right","0px");//扩充设计区域宽度
              if(will==current){
                  //如果当前点击的和将要切换的属性面板相同则隐藏整个右侧
                  $('.chart-right-panel').hide();
                  sessionStorage['rightToolsIsDisplay']=false;
              }else{
                  //如果当前点击和将要切换的属性面板不同则缩小设计区域宽度
                  $('.chart-design').css("right","230px");
              }
          }
      }

      //****************负责属性面板的内容设置*****************

      //设置当前部件top,left
      function setChartLocation(top,left){
          $('#lo-x-display').val(top);
          $('#lo-y-display').val(left);
      }

      //设置当前部件的飞行高度
      function setChartFlyHeight(height){
          $('#chart-flight-height-display').val(height);
      }
      //设置当前部件的飞行速度
      function setChartFlySpeed(speed) {
          $('#chart-flight-speed-display').val(speed);
      }

      //获得当前部件top,left,返回一个数组,第一个元素是'top',第二个元素是'left'
      function getChartLocation(){
          var location=new Array();
          location['top']=$('#lo-x-display').val();
          location['left']=$('#lo-y-display').val();
          return location;
      }

      //设置当前部件的width和height
      function setChartSize(width,height){
          $('#chart-width-display').val(width);
          $('#chart-height-display').val(height);
      }

      //获得当前部件的width和height,返回一个数组,第一个元素是'width',第二个元素是'height'
      function getChartSize(){
          var size=new Array();
          size['width']=$('#chart-width-display').val();
          size['height']=$('#chart-height-display').val();
          return size;
      }

      //设置当前部件的字体
      function setChartFont(font){
          $('#chart-font-display').val(font);
      }

      function getChartFont(){
          var font=$('#'+sessionStorage['currentChartSelected']).css('font');
          return (font=='') ? '微软雅黑':font;
      }

      //设置当前部件的字体大小
      function setChartFontSize(size){
          $('#chart-font-size-display').val(size);
      }

      //取当前部件的字体大小
      function getChartFontSize(){
          var fontSize=$('#'+sessionStorage['currentChartSelected']).css('font-size');
          return (fontSize=='') ? 12:fontSize.substring(0,fontSize.length-2);
      }

      //设置当前部件的对齐方式
      function setChartAlign(lign){
          $('#btn-align-'+lign).addClass('fl-align-style-active');
          if(lign=='left'){
              $('#btn-align-right').removeClass('fl-align-style-active');
              $('#btn-align-center').removeClass('fl-align-style-active');
              $('#btn-align-none').removeClass('fl-align-style-active');
          }

          if(lign=='right'){
              $('#btn-align-left').removeClass('fl-align-style-active');
              $('#btn-align-center').removeClass('fl-align-style-active');
              $('#btn-align-none').removeClass('fl-align-style-active');
          }

          if(lign=='center'){
              $('#btn-align-left').removeClass('fl-align-style-active');
              $('#btn-align-right').removeClass('fl-align-style-active');
              $('#btn-align-none').removeClass('fl-align-style-active');
          }

          if(lign=='none'){
              $('#btn-align-left').removeClass('fl-align-style-active');
              $('#btn-align-center').removeClass('fl-align-style-active');
              $('#btn-align-right').removeClass('fl-align-style-active');
          }

      }



      //线条类型 选择框的选择项被改变时触发
//      $('.chart-fill-line-type-selector').change(function(){
//          var valSelected=$(this).children('option:selected').val();//selected的值
//          setChartLineType(valSelected);
//      });


      //取当前部件的对齐方式
      function getChartAlign(){
          var align=$('#'+sessionStorage['currentChartSelected']).css('text-align');
          return (align=='') ? 'center':align;
      }

      //设置当前部件的字体颜色,参数color只能为rgb或16进制颜色值
      function setChartFontColor(color){
          $('#chart-font-color-display').val(color);
      }

      //取当前部件的字体颜色
      function getChartFontColor(){
          var color=$('#'+sessionStorage['currentChartSelected']).css('color');
          return (color=='') ? 'rgb(0,0,0)':color;
      }


      //设置json展示框的数据
      function setChartJson2Box(json){
          $('#json-display-area').val(json);
      }

      //设置当前部件的border-radius
      function setChartBorderRadius(radius){
          $('#chart-border-display').attr('value',radius);
      }

      //取当前部件的border
      function getChartBorderRadius(){
          var radius=$('#'+sessionStorage['currentChartSelected']).css('border-top-left-radius');
          return (radius=='') ? '0':radius;
      }

      //设置当前部件的border
      function setChartBorderLineStyle(style){
          $(".chart-fill-border-selector").val(style);
      }

      //取当前部件的border
      function getChartBorderLineStyle(){
          //console.log(document.getElementById(sessionStorage['currentChartSelected']).style.border);
          var style=$('#'+sessionStorage['currentChartSelected']).css('border-left-style');
          return (style=='') ? 'solid':style;
      }

      //设置当前部件的border-width
      function setChartBorderWidthStyle(style){
          $('#chart-fill-border-width-display').val(style);
      }

      //获得当前部件的border-width
      function getChartBorderWidthStyle(){
          var style=$('#'+sessionStorage['currentChartSelected']).css('border-left-width');
          return (style=='') ? '2':style.split('px')[0];
      }

      //设置当前部件的border-color
      function setChartBorderColorStyle(style){
          $('#chart-fill-border-color-display').attr('value',style);
      }

      //取得当前部件的border-color
      function getChartBorderColorStyle(){
          var style=$('#'+sessionStorage['currentChartSelected']).css('border-left-color');
          return (style=='') ? 'rgb(0,0,0)':style;
      }


  //把 #fffff 格式的颜色值码转换成 rgb格式
      function hexToRgb(hex) {
          var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
          return result ? {
              r: parseInt(result[1], 16),
              g: parseInt(result[2], 16),
              b: parseInt(result[3], 16)
          } : null;
      }

      //获取当前曲线的选择的颜色值
      $('#chart-fill-line-color-display').change(function(){
               var chooseColor = $(this).val();
                var lineColor =hexToRgb(chooseColor);
                console.log(lineColor);
           setChartLineColor(chooseColor);
      });

      
      //设置当前部件的填充背景色
      function setChartBackgroundColor(color){
          $('#chart-background-color-display').attr('value',color);
      }

      //取当前部件的填充背景色
      function getChartBackgroundColor(){
          var bg=$('#'+sessionStorage['currentChartSelected']).css('backgroundColor');
          return (bg=='') ? 'rgb(255,255,255)':bg;
      }

      //设置当前部件的渐近度
      function setChartBlurRange(range){
          $('#chart-blur-range-display').attr('value',range);
      }

      //取当前部件的渐近度
      function getChartBlurRange(){
          var range=$('#'+sessionStorage['currentChartSelected']).css('box-shadow');
          return (range=='none') ? '0':range;
      }

      //设置当前部件的渐近色
      function setChartBlurColor(color){
          $('#chart-fill-blur-color-display').attr('value',color);
      }

      //通过颜色选择器选择渐近色
      function getChartBlurColorByColorSelector(){
          return $('#chart-fill-blur-color-display').val();
      }

      //取当前部件的渐近色
      function getChartBlurColor(){
          var color=$('#'+sessionStorage['currentChartSelected']).css('boxShadow');
          return (color=='none') ? 'rgb(255,255,255)':color;
      }

      //设置当前部件的水平阴影
      function setChartHShadow(h){
          $('#chart-h-shadow-display').val(h);
      }

      //取得当前部件的水平阴影
      function getChartHShadow(){
          var h=$('#'+sessionStorage['currentChartSelected']).css('boxShadow');
          return (h=='none') ? '0':h;
      }

      //通过选择器获得水平阴影
      function getChartHShadowBySelector(){
          return $('#chart-h-shadow-display').val();
      }

      //设置当前部件的垂直阴影
      function setChartVShadow(v){
          $('#chart-v-shadow-display').val(v);
      }

      //取得当前部件的垂直阴影
      function getChartVshadow(){
          var v=$('#'+sessionStorage['currentChartSelected']).css('boxShadow');
          return (v=='none') ? '0':v;
      }

      //通过选择器获得垂直阴影
      function getChartVShadowBySelector(){
          return $('#chart-v-shadow-display').val();
      }

      //设置当前部件的模糊距离
      function setChartShadowBlur(blur){
          $('#chart-shadow-blur-display').val(blur);
      }

      //取得当前部件的模糊距离
      function getChartShadowBlur(){
          var blur=$('#'+sessionStorage['currentChartSelected']).css('boxShadow');
          return (blur=='blur') ? '0':blur;
      }

      //通过选择器获得模糊距离
      function getChartShadowBlurBySelector(){
          return $('#chart-shadow-blur-display').val();
      }

      //设置当前部件的阴影尺寸
      function setChartShadowSpread(spread){
          $('#chart-shadow-spread-display').val(spread);
      }

      //取得当前部件的阴影尺寸
      function getChartShadowSpread(){
          var spread=$('#'+sessionStorage['currentChartSelected']).css('boxShadow');
          return (spread=='blur') ? '0':spread;
      }

      //通过选择器获得阴影尺寸
      function getChartShadowSpreadBySelector(){
          return $('#chart-shadow-spread-display').val();
      }

      //设置当前部件的阴影颜色
      function setChartShadowColor(color){
          $('#chart-shadow-color-display').val(color);
      }

      //通过颜色选择器获取当前部件的阴影颜色
      function getChartShadowColorBySelector(){
          return $('#chart-shadow-color-display').val();
      }

      //取得当前部件的阴影颜色
      function getChartShadowColor(){
          var color=$('#'+sessionStorage['currentChartSelected']).css('box-shadow');
          return (color=='none') ? 'rgb(255,255,255)':color;
      }

      //设置属性栏的按钮样式
      function setChartFontStyleBtn(style){
          if(style!='normal'){
              var singleStyle=style.split('|');
              for(var i=0;i<singleStyle.length-1;i++){
                  $('#'+singleStyle[i]).addClass('fl-font-style-active');
              };
          }else{
              $('#B,#I,#U').removeClass('fl-font-style-active');
          }
      }

      //取当前部件的font-style
      function getChartFontStyle(id){
          if(id!=''){
              var style='';
              if($('#'+id).hasClass('fl-font-style-bold')){
                  style+='B|';
              }
              if($('#'+id).hasClass('fl-font-style-italic')){
                  style+='I|';
              }
              if($('#'+id).hasClass('fl-font-style-underline')){
                  style+='U|';
              }
              if(style!=''){
                  return style;
              }else{
                  return 'normal';
              }
          }
      }

      //设置文字高度
      function setChartLineHeight(height){
          $('#chart-font-height-display').val(height);
      }

      //取得文字高度
      function getChartLineHeight(){
          var height=$('#'+sessionStorage['currentChartSelected']).css('line-height');
          return (height=='') ? '0':height.split('px')[0];
      }

      //设置文字间距
      function setChartLetterSpacing(space){
          $('#chart-font-spacing-display').val(space);
      }

      //取得文字间距
      function getChartLetterSpacing(){
          var space=$('#'+sessionStorage['currentChartSelected']).css('letterSpacing');
          return (space=='') ? '0':space;
      }

      //****************负责属性面板的内容设置*****************

      //*********************************jsPlumb基础信息配置区域*********************************

      //流程图ID唯一标识,用来防止重复,每次新建一个部件时此值必须加1,否则会出现异常
      sessionStorage['idIndex']=0;

      //检测设计区域中间区域是否被占据,页面刚加载时默认没有被占据
      sessionStorage['midIsOccupied']='not';

      //根蒂根基连接线样式
      var connectorPaintStyle = {
          lineWidth: 2,
          strokeStyle: "rgb(95,158,160)",
          joinstyle: "round",
          outlineColor: "rgb(251,251,251)",
          outlineWidth: 2
      };

      // 鼠标悬浮在连接线上的样式
      var connectorHoverStyle = {
          lineWidth: 4,
          strokeStyle: "#216477",
          outlineWidth: 0,
          outlineColor: "rgb(95,158,160)"
      };

      //添加jsPlumb连接点
      var hollowCircle = {
          endpoint: ["Dot", { radius: 8 }],  //端点的外形
          connectorStyle: connectorPaintStyle,//连接线的色彩,大小样式
          connectorHoverStyle: connectorHoverStyle,
          paintStyle: {
              strokeStyle: "rgb(0,32,80)",
              fillStyle: "rgb(0,32,80)",
              opacity: 0.5,
              radius: 2,
              lineWidth: 2
          },//端点的色彩样式
          //anchor: "AutoDefault",
          isSource: true,    //是否可以拖动(作为连线出发点)
          //connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],  //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]
          connector: ["Straight", { curviness:100 } ],//设置连线为贝塞尔曲线
          isTarget: true,    //是否可以放置(连线终点)
          maxConnections: -1,    // 设置连接点最多可以连接几条线
          connectorOverlays: [["Arrow", { width: 10, length: 10, location: 1 }]]
      };

      //设置线条展现方式为Straight
      function setLineStraight(){hollowCircle['connector'][0]='Straight';}

      //设置线条展现方式为Bezier
      function setLineBezier(){hollowCircle['connector'][0]='Bezier';}

      //设置线条展现方式为Flowchart
      function setLineFlowchart(){hollowCircle['connector'][0]='Flowchart';}

      //灵活设置线条表现方式,参数type只能为Straight|Bezier|Flowchart
      function setChartLineType(type){hollowCircle['connector'][0]=type;}

      //线条的颜色  选择框的选择项被改变时触发
      function setChartLineColor(type){
          hollowCircle['connectorStyle'].strokeStyle=type;
          hollowCircle['connectorStyle'].outlineColor=type;
          hollowCircle['connectorHoverStyle'].strokeStyle=type;
          hollowCircle['connectorHoverStyle'].outlineColor=type;
      }

      //设置流程框内字体对齐方式
      //参数type只能为left,right或者center
      //参数ele若留空则默认全局设置,默认为空
      function setChartTextAlign(ele,type){
          ele=(arguments[0]=='') ? '':arguments[0];
          if(ele==''){
              $('.draggable').css('text-align',type);
          }else{
              $("#"+ele).css('text-align',type);
          }
      }

      //*********************************jsPlumb基础信息配置区域*********************************

      //*********************************流程图数据操作区域*********************************
      var list=[];//全部的连接点列表

      //序列化全部流程图数据,json格式
      function save(){

          var connects=[];

          for(var i in list){
              for(var j in list[i]){
                  connects.push({
                      ConnectionId:list[i][j]['id'],
                      PageSourceId:list[i][j]['sourceId'],
                      PageTargetId:list[i][j]['targetId']
                  });
              }
          }

          var blocks=[];
          $(".droppable .draggable").each(function(idx, elem){
              var elem=$(elem);
              var rareHTML=elem.html();
              var resultHTML=rareHTML;
              //去掉在进行复制操作时误复制的img部件
              if(rareHTML.indexOf('<img src=\"img/delete.png\"')!=-1){
                  rareHTML=rareHTML.split('<img src=\"img/delete.png\"');
                  resultHTML=rareHTML[0];
              }

              if(resultHTML.indexOf('<div style="z-index: 90;" ')!=-1){
                  resultHTML=resultHTML.split('<div style="z-index: 90;" ')[0];
              }

              /**********************字体**********************/
                  //字体
              var Bfont=elem.css("font");
              //字体颜色
              var fontSize=elem.css('font-size');
              //字体对齐方式
              var fontAlign=elem.css('text-align');
              //字体颜色
              var fontColor=elem.css('color');

              (Bfont=='') ? Bfont="微软雅黑":Bfont;
              (fontSize=='') ? fontSize='12':fontSize;
              (fontAlign=='') ? fontAlign='center':fontAlign;
              (fontColor=='') ? fontColor='rgb(0,0,0)':fontColor;

              /**********************物件**********************/
                  //圆角
              var borderRadius=elem.css('borderRadius');
              var elemType=elem.attr('id').split('-')[0];
              (borderRadius=='') ? borderRadius='0':borderRadius;
              //如果当前部件是圆角矩形,且borderRadius为空或者为0就把默认borderradius设置为4,下同
              (elemType=='roundedRect' && (borderRadius=='' || borderRadius=='0')) ? borderRadius='4':borderRadius;
              (elemType=='circle' && (borderRadius=='' || borderRadius=='0')) ? borderRadius='15':borderRadius;
              //填充
              var fillColor=elem.css('backgroundColor');
              (fillColor=='') ? fillColor='rgb(255,255,255)':fillColor;
              //渐近度
              var fillBlurRange=elem.css('boxShadow');//rgb(0, 0, 0) 10px 10px 17px 20px inset
              var fillBlurSplit=fillBlurRange.split(' ');
              (fillBlurRange=='') ? fillBlurRange='0':fillBlurRange=fillBlurSplit[5];
              //渐近色
              var fillBlurColor=fillBlurSplit[0]+fillBlurSplit[1]+fillBlurSplit[2];
              //线框样式
              var borderStyle=elem.css('border-left-style');
              (borderStyle=='') ? borderStyle='solid':borderStyle;
              //线框宽度
              var borderWidth=elem.css('border-left-width');
              (borderWidth=='') ? borderWidth='2':borderWidth.split('px')[0];
              //线框颜色
              var borderColor=elem.css('border-left-color');
              (borderColor=='') ? borderColor='rgb(136,242,75)':borderColor;

              //阴影数据
              var shadow=elem.css('box-shadow');

              //字体样式数据
              var fontStyle=elem.css('fontStyle');
              var fontWeight=elem.css('fontWeight');
              var fontUnderline=elem.css('textDecoration');

              //文字高度
              var lineHeight=elem.css('line-height');

              // 飞行速度 and 飞行高度
              var flyHeight = $(elem).attr("flyHeight");
              var flySpeed = $(elem).attr("flySpeed");

              blocks.push({
                  BlockId:elem.attr('id'),
//                  BlockContent:resultHTML,
                  BlockX:parseInt(elem.css("left"), 10),
                  BlockY:parseInt(elem.css("top"), 10),
                  BlockWidth:parseInt(elem.css("width"),10),
                  BlockHeight:parseInt(elem.css("height"),10),
                  BlockFlyHeight:parseInt(flyHeight),
                  BlockFlySpeet:parseInt(flySpeed)
//                  BlockFont:Bfont,
//                  BlockFontSize:fontSize,
//                  BlockFontAlign:fontAlign,
//                  BlockFontColor:fontColor,
//                  BlockBorderRadius:borderRadius,
//                  BlockBackground:fillColor,
//                  BlockFillBlurRange:fillBlurRange,
//                  BlockFillBlurColor:fillBlurColor,
//                  BlockBorderStyle:borderStyle,
//                  BlockBorderWidth:borderWidth,
//                  BlockborderColor:borderColor,
//                  BlockShadow:shadow,
//                  BlockFontStyle:fontStyle,
//                  BlockFontWeight:fontWeight,
//                  BlockFontUnderline:fontUnderline,
//                  BlockLineHeight:lineHeight
              });

          });

          var serliza="{"+'"connects":'+JSON.stringify(connects)+',"block":'+JSON.stringify(blocks)+"}";
          console.log(serliza);
          return serliza;
      }

      //生成单个流程图数据,用在新建流程图框时使用
      //参数ID表示被push进栈的ID
      function getSingleChartJson(id){

          var connects=[];

          for(var i in list){
              for(var j in list[i]){
                  connects.push({
                      ConnectionId:list[i][j]['id'],
                      PageSourceId:list[i][j]['sourceId'],
                      PageTargetId:list[i][j]['targetId'],
                  });
              }
          }

          var blocks=[];
          var elem=$("#"+id);
          var rareHTML=elem.html();
          var resultHTML=rareHTML;
          //console.log(rareHTML);
          //去掉在进行复制操作时误复制的img部件
          if(rareHTML.indexOf('<img src=\"img/delete.png\"')!=-1){
              rareHTML=rareHTML.split('<img src=\"img/delete.png\"');
              resultHTML=rareHTML[0];
          }

          if(resultHTML.indexOf('<div style="z-index: 90;" ')!=-1){
              resultHTML=resultHTML.split('<div style="z-index: 90;" ')[0];
          }

          /**********************字体**********************/
              //字体
          var Bfont=elem.css("font");
          //字体颜色
          var fontSize=elem.css('font-size');
          //字体对齐方式
          var fontAlign=elem.css('text-align');
          //字体颜色
          var fontColor=elem.css('color');

          (Bfont=='') ? Bfont="微软雅黑":Bfont;
          (fontSize=='') ? fontSize='12':fontSize;
          (fontAlign=='') ? fontAlign='center':fontAlign;
          (fontColor=='') ? fontColor='rgb(0,0,0)':fontColor;

          /**********************物件**********************/
              //圆角
          var borderRadius=elem.css('borderRadius');
          var elemType=id.split('-')[0];
          (borderRadius=='') ? borderRadius='0':borderRadius;
          //如果当前部件是圆角矩形,且borderRadius为空或者为0就把默认borderradius设置为4,下同
          (elemType=='roundedRect' && (borderRadius=='' || borderRadius=='0')) ? borderRadius='4':borderRadius;
          (elemType=='circle' && (borderRadius=='' || borderRadius=='0')) ? borderRadius='15':borderRadius;
          //填充
          var fillColor=elem.css('backgroundColor');
          (fillColor=='') ? fillColor='rgb(255,255,255)':fillColor;
          //渐近度
          var fillBlurRange=elem.css('boxShadow');//rgb(0, 0, 0) 10px 10px 17px 20px inset
          var fillBlurSplit=fillBlurRange.split(' ');
          (fillBlurRange=='') ? fillBlurRange='0':fillBlurRange=fillBlurSplit[5];
          //渐近色
          var fillBlurColor=fillBlurSplit[0]+fillBlurSplit[1]+fillBlurSplit[2];
          //线框样式
          var borderStyle=elem.css('border-left-style');
          (borderStyle=='') ? borderStyle='solid':borderStyle;
          //线框宽度
          var borderWidth=elem.css('border-left-width');
          (borderWidth=='') ? borderWidth='2':borderWidth.split('px')[0];
          //线框颜色
          var borderColor=elem.css('border-left-color');
          (borderColor=='') ? borderColor='rgb(136,242,75)':borderColor;

          //阴影数据
          var shadow=elem.css('box-shadow');

          //字体样式数据
          var fontStyle=elem.css('fontStyle');
          var fontWeight=elem.css('fontWeight');
          var fontUnderline=elem.css('textDecoration');

          //文字高度
          var lineHeight=elem.css('line-height');

          blocks.push({
              BlockId:elem.attr('id'),
              BlockContent:resultHTML,
              BlockX:parseInt(elem.css("left"), 10),
              BlockY:parseInt(elem.css("top"), 10),
              BlockWidth:parseInt(elem.css("width"),10),
              BlockHeight:parseInt(elem.css("height"),10),
              BlockFont:Bfont,
              BlockFontSize:fontSize,
              BlockFontAlign:fontAlign,
              BlockFontColor:fontColor,
              BlockBorderRadius:borderRadius,
              BlockBackground:fillColor,
              BlockFillBlurRange:fillBlurRange,
              BlockFillBlurColor:fillBlurColor,
              BlockBorderStyle:borderStyle,
              BlockBorderWidth:borderWidth,
              BlockborderColor:borderColor,
              BlockShadow:shadow,
              BlockFontStyle:fontStyle,
              BlockFontWeight:fontWeight,
              BlockFontUnderline:fontUnderline,
              BlockLineHeight:lineHeight
          });

          var serliza="{"+'"connects":'+JSON.stringify(connects)+',"block":'+JSON.stringify(blocks)+"}";
          console.log(serliza);
          return serliza;
      }

      function changeValue(id){
          var onOff =1;  //为了防止双击出现两次编辑框。
          $(id).dblclick(function() {
              var flySpeed = $(id).attr("flySpeed");  //获取部件的飞行速度
              var flyHeight = $(id).attr("flyHeight"); //获取部件的飞行高度
              var flyLeft = $(id).css("left");  //获取部件的横坐标
              var flyTop = $(id).css("top");    //获取部件的纵坐标
              if(onOff){
                  onOff = 0;
                  $(id).append(
                      '<div id="dialog" class="dialog-style">' +
                      '<div id="content">' +
                      '<p>' +
                      '<span> 飞行高度:</span>' +
                      ' <input type=\'text\' id=\'btn-height\' value="' + flyHeight + '" name="height">' +
                      '<p>' +
                      '<p>' +
                      ' <span> 飞行速度:</span>' +
                      '<input type=\'text\' id=\'btn-speed\' value="' + flySpeed + '" name="speed">' +
                      '<p>' +
                      '<p>' +
                      '<span> 飞行坐标:</span>' +
                      ' <span id=\'btn-trail\'>' +
                      ' <input type=\'text\' id=\'top\' value="' + flyTop + '"  name="top">' +
                      '<input type=\'text\' id=\'left\' value="' + flyLeft + '" name="left">' +
                      ' </span>' +
                      '<p>' +
                      '</div>' +
                      '<button id="mb_btn_ok" class="but-ok">确定</button>' +
                      '<button id="mb_btn_no" class="but-no">取消</button>' +
                      '</div>');
              }
               $('#mb_btn_ok').click(function () {
                  $(id).attr("flyHeight", $("#btn-height").val());
                  $(id).attr("flySpeed", $("#btn-speed").val());
                  $(id).attr("left", $("#left").val());
                  $(id).attr("top", $("#top").val());
                  setChartDesignTop(parseInt($("#top").val())); //设置横坐标
                  setChartDesignLeft(parseInt($("#left").val())); //设置纵坐标
                  setChartDesignFlyHeight($("#btn-height").val()); //设置飞行高度
                  setChartDesignFlySpeed($("#btn-speed").val());  //设置飞行速度
                  $("#dialog").remove();    //移除编辑矿的样式
                  $("#dialogShow").remove();//删除鼠标经过的样式
                   onOff = 1;
              });
               $("#mb_btn_no").click(function () {
                  $("#dialog").remove();     //移除编辑矿的样式
                  $("#dialogShow").remove();//删除鼠标经过的样式
                   onOff =1;
              });
          });
      }

//新增一个部件
      //参数newChartArea代表新增部件的区域
      //参数chartID代表新流程图部件的ID,格式为元素名称-index
      //参数left,top代表新部件的插入位置
      //参数blockName代表新部件的文本
      //参数undo表示是否进行撤销操作,如果进行撤销操作则不进行入栈,默认为false
      function addNewChart(newChartArea,chartID,left,top,blockName,undo){

          undo=(undo=='') ? false:arguments[5];

          var name=chartID.split('-')[0];

          //在div内append元素
          $(newChartArea).append("<div class=\"draggable "+name+" new-"+name+"\" id=\""+chartID+"\">"+blockName+"</div>");
          $("#"+chartID).css("left",left).css("top",top).css("position","absolute").css("margin","0px");
          $("#"+chartID).attr('flyHeight','0').attr('flySpeed','0');
          //用jsPlumb添加锚点
          jsPlumb.addEndpoint(chartID,{anchors: "TopCenter"},hollowCircle);
//          jsPlumb.addEndpoint(chartID,{anchors: "RightMiddle"},hollowCircle);
//          jsPlumb.addEndpoint(chartID,{anchors: "BottomCenter"},hollowCircle);
//          jsPlumb.addEndpoint(chartID,{anchors: "LeftMiddle"},hollowCircle);

          jsPlumb.draggable(chartID);
          $("#"+chartID).draggable({containment: "parent"});//保证拖动不跨界

          sessionStorage['idIndex']=sessionStorage['idIndex']+1;

          changeValue("#"+chartID);

          if(undo==false){
              chartOperationStack['add'].push(getSingleChartJson(chartID));
              chartRareOperationStack.push('add');
          }
      }

      //通过json加载流程图
      function loadChartByJSON(data){
          var unpack=JSON.parse(data);

          if(!unpack){
              return false;
          }

          /*flowConnector={
            anchors:["BottomCenter","TopCenter"],
            endpoints:["dot","blank"]
          };*/

          for(var i=0;i<unpack['block'].length;i++){
              var BlockId=unpack['block'][i]['BlockId'];
              var BlockContent=unpack['block'][i]['BlockContent'];
              var BlockX=unpack['block'][i]['BlockX'];
              var BlockY=unpack['block'][i]['BlockY'];
              var width=unpack['block'][i]['BlockWidth'];
              var height=unpack['block'][i]['BlockHeight'];
              var font=unpack['block'][i]['BlockFont'];
              var fontSize=unpack['block'][i]['BlockFontSize'];
              var fontAlign=unpack['block'][i]['BlockFontAlign'];
              var fontColor=unpack['block'][i]['BlockFontColor'];
              var borderRadius=unpack['block'][i]['BlockBorderRadius'];
              var backgroundColor=unpack['block'][i]['BlockBackground'];
              var fillBlurRange=unpack['block'][i]['BlockFillBlurRange'];
              var fillBlurColor=unpack['block'][i]['BlockFillBlurColor'];
              var borderStyle=unpack['block'][i]['BlockBorderStyle'];
              var borderColor=unpack['block'][i]['BlockborderColor'];
              var shadow=unpack['block'][i]['BlockShadow'];
              var fontStyle=unpack['block'][i]['BlockFontStyle'];
              var fontWeight=unpack['block'][i]['BlockFontWeight'];
              var fontUnderline=unpack['block'][i]['BlockFontUnderline'];
              var lineHeight=unpack['block'][i]['BlockLineHeight'];

              var blockAttr=BlockId.split('-')[0];

              var boxInsetShadowStyle='10px 10px '+fillBlurRange+"px 20px "+fillBlurColor+' inset';

              $('.chart-design').append("<div class=\"draggable "+blockAttr+" new-"+blockAttr+"\" id=\""+BlockId+"\">"+BlockContent+"</div>");
              $("#"+BlockId)
                  .css("left",BlockX)
                  .css("top",BlockY)
                  .css("position","absolute")
                  .css("margin","0px")
                  .css("width",width)
                  .css("height",height)
                  .css('font',font)
                  .css('font-size',fontSize)
                  .css('text-align',fontAlign)
                  .css('color',fontColor)
                  .css('border-radius',borderRadius)
                  .css('background',backgroundColor)
                  .css('box-shadow',boxInsetShadowStyle)
                  .css('border-style',borderStyle)
                  .css('border-color',borderColor)
                  .css('box-shadow',shadow)
                  .css('font-style',fontStyle)
                  .css('font-weight',fontWeight)
                  .css('font-underline',fontUnderline)
                  .css('line-height',lineHeight);
          }

          /*for(i=0;i<unpack['connects'].length;i++){
            var ConnectionId=unpack['connects'][i]['ConnectionId'];
            var PageSourceId=unpack['connects'][i]['PageSourceId'];
            var PageTargetId=unpack['connects'][i]['PageTargetId'];

            //用jsPlumb添加锚点
            jsPlumb.addEndpoint(PageSourceId,{anchors: "TopCenter"},hollowCircle);
            jsPlumb.addEndpoint(PageSourceId,{anchors: "RightMiddle"},hollowCircle);
            jsPlumb.addEndpoint(PageSourceId,{anchors: "BottomCenter"},hollowCircle);
            jsPlumb.addEndpoint(PageSourceId,{anchors: "LeftMiddle"},hollowCircle);

            jsPlumb.addEndpoint(PageTargetId,{anchors: "TopCenter"},hollowCircle);
            jsPlumb.addEndpoint(PageTargetId,{anchors: "RightMiddle"},hollowCircle);
            jsPlumb.addEndpoint(PageTargetId,{anchors: "BottomCenter"},hollowCircle);
            jsPlumb.addEndpoint(PageTargetId,{anchors: "LeftMiddle"},hollowCircle);

            jsPlumb.draggable(PageSourceId);
            jsPlumb.draggable(PageTargetId);

            $("#"+PageSourceId).draggable({containment: "parent"});//保证拖动不跨界
            $("#"+PageTargetId).draggable({containment: "parent"});//保证拖动不跨界

            jsPlumb.connect({
              source:PageSourceId,target:PageTargetId},
              flowConnector);
          }*/

          return true;
      }

      //loadChartByJSON('{"connects":[],"block":[{"BlockId":"rect-01","BlockContent":"文本","BlockX":648,"BlockY":40,"BlockWidth":120,"BlockHeight":120,"BlockFont":"微软雅黑","BlockFontSize":"60px","BlockFontAlign":"center","BlockFontColor":"rgb(255, 255, 255)","BlockBorderRadius":"0","BlockBackground":"rgb(128, 0, 255)","BlockFillBlurRange":"85px","BlockFillBlurColor":"rgb(0,0,0)","BlockBorderStyle":"dashed","BlockBorderWidth":"2px","BlockborderColor":"rgb(136, 242, 75)","BlockShadow":"rgb(0, 0, 0) 30px 51px 85px 0px"},{"BlockId":"roundedRect-0111","BlockContent":"文本","BlockX":464,"BlockY":94,"BlockWidth":120,"BlockHeight":20,"BlockFont":"微软雅黑","BlockFontSize":"12px","BlockFontAlign":"center","BlockFontColor":"rgb(0, 0, 0)","BlockBorderRadius":"4","BlockBackground":"rgb(128, 0, 255)","BlockFillBlurColor":"noneundefinedundefined","BlockBorderStyle":"solid","BlockBorderWidth":"2px","BlockborderColor":"rgb(136, 242, 75)","BlockShadow":"none"}]}');
      //sessionStorage['currentChartAmount']=sessionStorage['currentChartAmount']+2;

      //删除一个流程框图,若参数undo为true则在进行操作时不进行入栈操作,默认为false
      function deleteChart(id,undo){
          undo=(undo=='') ? false:'';
          var DOM=$('#'+id);
          if(undo==false){
              chartOperationStack['delete'].push(getSingleChartJson(id));
          }
          jsPlumb.removeAllEndpoints(id);
          DOM.remove();
          if(undo==false){
              chartRareOperationStack.push('delete');
          }
      }

      //设置流程框图宽度,如果当前选择的部件为none则默认改变全局,下同
      function setChartDesignWidth(width){
          if(sessionStorage['currentChartSelected']=='none'){
              $('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('width',width);
          }else{
              $('#'+sessionStorage['currentChartSelected']).css('width',width);
          }
      }

      //设置流程框图高度
      function setChartDesignHeight(height){
          if(sessionStorage['currentChartSelected']=='none'){
              $('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('height',height);
          }else{
              $('#'+sessionStorage['currentChartSelected']).css('height',height);
          }
      }

      //设置流程框图的飞行高度
      function setChartDesignFlyHeight(flyHeight) {
          if(sessionStorage['currentChartSelected']=='none'){
              $('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').attr('flyHeight',flyHeight);
          }else{
              $('#'+sessionStorage['currentChartSelected']).attr('flyHeight',flyHeight);
          }
      }

      //设置流程框图的飞行速度
      function setChartDesignFlySpeed(flySpeed) {
          if(sessionStorage['currentChartSelected']=='none'){
              $('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').attr('flySpeed',flySpeed);
          }else{
              $('#'+sessionStorage['currentChartSelected']).attr('flySpeed',flySpeed);
          }
      }

      //设置流程框图top
      function setChartDesignTop(top){
          console.log(top);
          if(sessionStorage['currentChartSelected']=='none'){
              $('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('top',top);
          }else{
              $('#'+sessionStorage['currentChartSelected']).css('top',top);
          }
      }

      //设置流程框图left
      function setChartDesignLeft(left){
          if(sessionStorage['currentChartSelected']=='none'){
              $('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('left',left);
          }else{
              $('#'+sessionStorage['currentChartSelected']).css('left',left);
          }
      }

      //设置流程框图字体
      function setChartDesignFont(font){
          if(sessionStorage['currentChartSelected']=='none'){
              $('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('font',font);
          }else{
              $('#'+sessionStorage['currentChartSelected']).css('font',font);
          }
      }

      //设置流程框图字体大小
      function setChartDesignFontSize(size){
          if(sessionStorage['currentChartSelected']=='none'){
              $('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('font-size',size);
          }else{
              $('#'+sessionStorage['currentChartSelected']).css('font-size',size);
          }
      }

      //设置流程框图字体颜色
      function setChartDesignFontColor(color){
          if(sessionStorage['currentChartSelected']=='none'){
              $('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('color',color);
          }else{
              $('#'+sessionStorage['currentChartSelected']).css('color',color);
          }
      }

      //设置流程图框的对齐方式
      function setChartDesignFontAlign(align){
          var lign={'居左':'left','居右':'right','居中':'center'};
          if(sessionStorage['currentChartSelected']=='none'){
              $('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('text-align',lign[align]);
          }else{
              $('#'+sessionStorage['currentChartSelected']).css('text-align',lign[align]);
          }
      }

      //设置流程图框的圆角大小
      function setChartDesignBorderRadius(radius){
          if(sessionStorage['currentChartSelected']=='none'){
              $('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('border-top-left-radius',radius);
          }else{
              $('#'+sessionStorage['currentChartSelected']).css('border-top-left-radius',radius);
          }
      }

      //设置流程图框的线样式
      //参数style只能为solid|dotted|double|dashed
      function setChartDeignBorderLineStyle(style){
          if(sessionStorage['currentChartSelected']=='none'){
              $('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('border-style',style);
          }else{
              $('#'+sessionStorage['currentChartSelected']).css('border-style',style);
          }
      }

      //设置流程图框的线宽度
      function setChartDesignBorderWidthStyle(style){
          if(sessionStorage['currentChartSelected']=='none'){
              $('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('border-width',style);
          }else{
              $('#'+sessionStorage['currentChartSelected']).css('border-width',style);
          }
      }

      //设置流程图框的线颜色
      function setChartDesignBorderColorStyle(style){
          if(sessionStorage['currentChartSelected']=='none'){
              $('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('border-color',style);
          }else{
              $('#'+sessionStorage['currentChartSelected']).css('border-color',style);
          }
      }

      //设置流程图框背景色
      function setChartDesignBackground(style){
          if(sessionStorage['currentChartSelected']=='none'){
              $('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('backgroundColor',style);
          }else{
              $('#'+sessionStorage['currentChartSelected']).css('backgroundColor',style);
          }
      }

      //设置流程图框渐近色,参数rate表示渐近度,blurColor表示渐近色
      function setChartDesignBoxShadow(rate,blurColor){
          var style='10px 10px '+rate+"px 20px "+blurColor+' inset';
          if(sessionStorage['currentChartSelected']=='none'){
              $('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('box-shadow',style);
          }else{
              $('#'+sessionStorage['currentChartSelected']).css('box-shadow',style);
          }
      }

      //设置流程图框阴影
      //参数h表示水平阴影
      //参数v表示垂直阴影
      //参数blur表示模糊距离
      //参数spread表示阴影尺寸
      //参数color表示阴影颜色
      function setChartDesignBoxShadowA(h,v,blur,spread,color){
          var style=h+'px '+v+'px '+blur+'px '+spread+'px '+color;
          if(sessionStorage['currentChartSelected']=='none'){
              $('.new-circle,.new-rhombus,.new-roundedRect,.new-rect').css('box-shadow',style);
          }else{
              $('#'+sessionStorage['currentChartSelected']).css('box-shadow',style);
          }
      }

      //设置文字高度
      function setChartDesignLineHeight(height){
          $('#'+sessionStorage['currentChartSelected']).css('line-height',height);
      }

      //设置文字间距
      function setChartDesignLetterSpacing(space){
          $('#'+sessionStorage['currentChartSelected']).css('letter-spacing',space);
      }


      //*********************************流程图数据操作区域*********************************

      $(document).ready(function(){

          //**************************************画网格***************************************
          //网格方法

//          var c=document.getElementById("chart-container");
//          var cxt=c.getContext("2d");
//          cxt.fillStyle="#FF0000";
//          for (var i=0;i<910;i++) {
//              horLine({x:i,y:0},{x:i,y:510});
//              i = i+20
//          }
//          for (var j=0;j<510;i++) {
//              horLine({x:0,y:j},{x:900,y:j});
//              j = j+20
//          }
//          //画线
//          function horLine (originPoint, targetPoint) {
//              cxt.moveTo(originPoint.x,originPoint.y);
//              cxt.lineTo(targetPoint.x,targetPoint.y);
//          }

          //**************************************UI控制部分***************************************

          //初始化动画效果
          $('.chart-ratio-form,.chart-fill-border-selector,#chart-v-shadow-display,#chart-h-shadow-display,#chart-blur-range-display,#chart-shadow-blur-display,#chart-shadow-color-display,#chart-shadow-spread-display').css("opacity",'0.6');

          //隐藏右侧属性面板
          //$('.chart-right-panel').hide();

          //为按钮,列表添加动画效果
          $('.fl-btn,h4').hover(
              function(){$(this).stop().animate({opacity:0.5},'fast');},
              function(){$(this).stop().animate({opacity:1},'fast');}
          );

          //为左下角大小调节添加动画效果
          $('.chart-ratio-form,.chart-fill-border-selector,#chart-v-shadow-display,#chart-h-shadow-display,#chart-blur-range-display,#chart-shadow-blur-display,#chart-shadow-color-display,#chart-shadow-spread-display').hover(
              function(){$(this).stop().animate({opacity:1},'fast');},
              function(){$(this).stop().animate({opacity:0.6},'fast');}
          );

          //给左侧工具栏分页
          $(".chart-object").accordion();

          //调节区域双击可输入数字更改
          $('.rare-ratio').dblclick(function(){
              var chartRatioValue=document.getElementById('rear-ratio').value;
          });

          //页面上方按钮事件

          //标识线条选择器有没有被展开,默认不展开
          sessionStorage['topLineSelectIsDisplayed']=false;
          //标识排列选择器有没有被展开,默认不展开
          sessionStorage['topAlignSelectIsDisplayed']=false;

          //对页面上方的工具菜单进行折叠
          function selectorToggle(event,element){
              //取消事件冒泡
              event.stopPropagation();
              //设置弹出层的位置
              var offset=$(event.target).offset();
              $(element).css({
                  top:offset.top+$(event.target).height()+"px",
                  left:offset.left
              });

              //按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。
              $(element).toggle('fast');
          }

          //上方工具栏的按钮点击事件
          $('.fl-btn').click(function(event){
              //取被点击按钮的ID
              var flBtnID=$(this).attr('id');
              var currentListFlag=getChartRightListFlag();//当前显示的属性面板
              switch(flBtnID){
                  case 'new-text':
                      //测试自动连接线




                      break;
                  case 'new-box':
                      //新建流程图框
                      if(sessionStorage['midIsOccupied']=='not'){
                          //如果中间位置没有被占据则在中间位置新建一个部件
                          var left=$('.chart-design').width()/2;
                          var top=$('.chart-design').height()/2;
                          addNewChart('.chart-design',"roundedRect-"+sessionStorage['idIndex']+sessionStorage['currentChartAmount'],left,top-20,'新部件');
                          sessionStorage['midIsOccupied']='yes';
                          sessionStorage['currentChartAmount']=sessionStorage['currentChartAmount']+2;
                      }else{
                          //如果中间位置被占据则根据随机数新建一个部件
                          var randomLeft=Math.ceil(Math.random()*$('.chart-design').width());
                          var randomTop=Math.ceil(Math.random()*($('.chart-design').height()-25));
                          addNewChart('.chart-design',"roundedRect-"+sessionStorage['idIndex']+sessionStorage['currentChartAmount'],randomLeft,randomTop,'新部件');
                          sessionStorage['currentChartAmount']=sessionStorage['currentChartAmount']+2;
                      }
                      break;
                  case 'line-mode':
                      //设置线条样式

                      if(sessionStorage['topAlignSelectIsDisplayed']=='true'){
                          $('#align-select-div').toggle('fast');
                          sessionStorage['topAlignSelectIsDisplayed']=false;
                      }

                      selectorToggle(event,'#line-select-div');
                      sessionStorage['topLineSelectIsDisplayed']=true;
                      break;
                  case 'text-chart-align':
                      //流程图框对齐或文本对齐

                      if(sessionStorage['topLineSelectIsDisplayed']=='true'){
                          $('#line-select-div').toggle('fast');
                          sessionStorage['topLineSelectIsDisplayed']=false;
                      }

                      selectorToggle(event,'#align-select-div');
                      sessionStorage['topAlignSelectIsDisplayed']=true;
                      break;
                  case 'chart-save':
                      //分享或保存(生成JSON)
                      var jsondata=save();
                      var nowTime = new Date().getTime();
                      var jsonName = nowTime + '.json';
                      var imgName = nowTime + '.png';
                      $('.save-form').slideToggle('slow');
                      var blob = new Blob([jsondata]);
                      var jsonUrl = URL.createObjectURL(blob);
                      $('.save-json-href').html('<a download="'+jsonName+'" href="'+jsonUrl+'">下载jsons数据</a>');
                      html2canvas($('.droppable'), {
                          onrendered: function(canvas) {
                              var data=canvas.toDataURL("image/png");
                              $('.save-img-href').html('<a download="'+imgName+'" href="'+data+'">下载图片</a>');
                          }
                      });
                      break;
                  case 'btn-object':
                      //显示object面板
                      attrToggle('object',currentListFlag);
                      break;
                  case 'btn-text':
                      //显示text面板
                      attrToggle('text',currentListFlag);
                      break;
                  case 'btn-style':
                      //显示style面板`
                      attrToggle('style',currentListFlag);
                      break;
                  case 'btn-align-left':
                      //居左显示
                      setChartTextAlign(sessionStorage['currentChartSelected'],'left');
                      $('#btn-align-left').addClass('fl-align-style-active');
                      $('#btn-align-right,#btn-align-center,#btn-align-none').removeClass('fl-align-style-active');
                      break;
                  case 'btn-align-right':
                      //居右显示
                      setChartTextAlign(sessionStorage['currentChartSelected'],'right');
                      $('#btn-align-right').addClass('fl-align-style-active');
                      $('#btn-align-left,#btn-align-center,#btn-align-none').removeClass('fl-align-style-active');
                      break;
                  case 'btn-align-center':
                      //居中显示
                      setChartTextAlign(sessionStorage['currentChartSelected'],'center');
                      $('#btn-align-center').addClass('fl-align-style-active');
                      $('#btn-align-right,#btn-align-left,#btn-align-none').removeClass('fl-align-style-active');
                      break;
                  case 'btn-align-none':
                      //居无显示
                      setChartTextAlign(sessionStorage['currentChartSelected'],'left');
                      $('#btn-align-none').addClass('fl-align-style-active');
                      $('#btn-align-right,#btn-align-center,#btn-align-left').removeClass('fl-align-style-active');
                      break;
                  default:
                      break;
              }
          });

          //切换字体样式按钮状态
          function fontStyleBtnToggle(will){
              $('#'+will).toggleClass('fl-font-style-active');
          }

          //字体样式按钮控制区域
          $('.fl-font-style').click(function(){
              var id=$(this).attr('id');
              switch(id){
                  case 'B'://bold
                      fontStyleBtnToggle('B');
                      $('#'+sessionStorage['currentChartSelected']).toggleClass("fl-font-style-bold");
                      break;
                  case 'I'://italic
                      fontStyleBtnToggle('I');
                      $('#'+sessionStorage['currentChartSelected']).toggleClass("fl-font-style-italic");
                      break;
                  case 'U'://underline
                      fontStyleBtnToggle('U');
                      $('#'+sessionStorage['currentChartSelected']).toggleClass("fl-font-style-underline");
                      break;
                  default:
                      break;
              }
          });

          //**************************************UI控制部分***************************************

          //***********************************元素拖动控制部分************************************

          //允许元素拖动
          $(".list-content .area").children().draggable({
              //revert: "valid",//拖动之后原路返回
              helper: "clone",//复制自身
              scope: "dragflag"//标识
          });

          $(".droppable").droppable({
              accept: ".draggable", //只接受来自类.dragable的元素
              activeClass:"drop-active", //开始拖动时放置区域显示
              scope: "dragflag",
              drop:function(event,ui){

                  sessionStorage['idIndex']=sessionStorage['idIndex']+1;

                  //获取鼠标坐标
                  var left=parseInt(ui.offset.left-$(this).offset().left);
                  console.log(left);
                  var top=parseInt(ui.offset.top-$(this).offset().top)+4;
                  console.log(top);
                  setChartLocation(top,left);//设置坐标

                  //设置当前部件的飞行高度，具体200这个值怎么算，待商议。
                  setChartFlyHeight(200);
                  //设置当前部件的飞行速度，具体200这个值怎么算，待商议。
                  setChartFlySpeed(200);

                  var name=ui.draggable[0].id;//返回被拖动元素的ID
                  var trueId=name+"-"+sessionStorage['idIndex']+sessionStorage['currentChartAmount'];
                  console.log(trueId);

                  //在div内append元素
                  $(this).append("<div class=\"draggable "+name+" new-"+name+"\" id=\""+trueId+"\">"+$(ui.helper).html()+"</div>");
                  $("#"+trueId).css("left",left).css("top",top).css("position","absolute").css("margin","0px");
                  $("#"+trueId).attr("flyHeight","0").attr("flySpeed","0");


                  //鼠标放在部件上显示部件属性
                  $("#"+trueId).mouseover(function(){
                      var flySpeed=$("#"+trueId).attr("flySpeed");  //获取部件的飞行速度
                      var flyHeight=$("#"+trueId).attr("flyHeight"); //获取部件的飞行高度
                      var flyLeft = $("#"+trueId).css("left");  //获取部件的横坐标
                      var flyTop = $("#"+trueId).css("top");    //获取部件的纵坐标
                      $("#"+trueId).append(
                          '<div id="dialogShow" class="mouseShow-style">'+
                          '<p>' +
                          '<span> 飞行高度:</span>' +
                          '<input  id=\'show-height\' value="' + flyHeight + '">'+
                          '<p>' +
                          '<p>' +
                          '<span> 飞行速度:</span>' +
                          '<input  id=\'show-speed\' value="' + flySpeed + '">'+
                          '<p>' +
                          '<p>' +
                          '<span> 飞行坐标:</span>' +
                          '<span>'+
                          '<input  id=\'show-top\' value="' + flyTop + '">' +
                          '<input  id=\'show-left\' value="' + flyLeft + '">'+
                          ' </span>' +
                          '<p>' +
                          '</div>');
                  });
                  //鼠标移除部件取消部件属性
                  $("#"+trueId).mouseout(function(){
                      $("#dialogShow").remove();
                  });

                  //用jsPlumb添加锚点
                  jsPlumb.addEndpoint(trueId,{anchors: "TopCenter"},hollowCircle);
//                  jsPlumb.addEndpoint(trueId,{anchors: "RightMiddle"},hollowCircle);
//                  jsPlumb.addEndpoint(trueId,{anchors: "BottomCenter"},hollowCircle);
//                  jsPlumb.addEndpoint(trueId,{anchors: "LeftMiddle"},hollowCircle);

                  jsPlumb.draggable(trueId);
                  $("#"+trueId).draggable({containment: "parent"});//保证拖动不跨界
                  changeValue("#"+trueId);

                  list=jsPlumb.getAllConnections();//获取所有的连接

                  //元素ID网上加,防止重复
                  sessionStorage['idIndex']=sessionStorage['idIndex']+1;

                  //设置当前选择的流程框图
                  sessionStorage['currentChartSelected']=trueId;

                  //将新拖进来的流程图框JSON数据push进栈
                  chartOperationStack['add'].push(getSingleChartJson(trueId));
                  chartRareOperationStack.push('add');

                  sessionStorage['currentChartAmount']=parseInt(sessionStorage['currentChartAmount'],10)+2;
              }
          });

          $('.droppable .draggable').resizable({
              ghost: true
          });

          //删除元素按钮
          $(".droppable").on("mouseenter",".draggable",function(){
              $(this).append("<img src=\"img\/delete.png\" id=\"fuck\" style=\"position:absolute;width:20px;height:16px;\"/>");

              //因为流程图的形状不一样,所以要获取特定的流程图名称来指定删除按钮的位置
              var wholeID=$(this).attr('id');
              var wholeIDSep=wholeID.split('-');

              if(wholeIDSep[0]=="circle") {
                  $("img").css("left", $(this).width()-20).css("top", 20);
              }else if(wholeIDSep[0]=="rhombus"){
                  $("img").css("left", $(this).width()-18).css("top", 10);
              }else{
                  $("img").css("left", $(this).width()-20).css("top", 10);
              }
          });

          $(".droppable").on("mouseleave",".draggable",function(){
              $(".chart-content img").remove();
          });

          $(".droppable").on("click","img",function(){
              //要先保存父元素的DOM,因为出现确认对话框之后(this)会消失
              var parentDOM=$(this).parent();
              var parentID=parentDOM.attr('id');
              if(confirm("确定要删除吗?")) {
                  chartOperationStack['delete'].push(getSingleChartJson(parentID));
                  jsPlumb.removeAllEndpoints(parentID);
                  parentDOM.remove();
                  chartRareOperationStack.push('delete');
              }
          });

          //设计区域元素被点击事件,同步右侧属性面板
          $('.droppable').on('click','.draggable',function(){
              //获得当前选择部件的ID
              sessionStorage['currentChartSelected']=$(this).attr('id');

              //设置当前部件的坐标和大小
              setChartLocation($(this).offset().top,$(this).offset().left);
              setChartSize($(this).width(),$(this).height());

              //设置当前选择部件的字体
              setChartFont(getChartFont());

              //设置当前选择部件的字体大小
              setChartFontSize(getChartFontSize());

              //设置当前选择部件的对齐方式
              setChartAlign(getChartAlign());

              //设置当前选择部件的字体颜色
              setChartFontColor(getChartFontColor());

              //设置JSON数据放置区域的值
              setChartJson2Box(getSingleChartJson(sessionStorage['currentChartSelected']));

              //设置圆角
              setChartBorderRadius(getChartBorderRadius());

              //设置border属性width style color
              setChartBorderLineStyle(getChartBorderLineStyle());
              setChartBorderWidthStyle(getChartBorderWidthStyle());
              setChartBorderColorStyle(getChartBorderColorStyle());


              //设置背景色
              setChartBackgroundColor(getChartLineColorStyle());

              //设置渐近度和渐近色
              setChartBlurRange(getChartBlurRange());
              setChartBlurColor(getChartBlurColor());

              //设置当前部件的阴影
              setChartHShadow(getChartHShadow());
              setChartVShadow(getChartVshadow());
              setChartShadowSpread(getChartShadowSpread());
              setChartShadowColor(getChartShadowColor());
              setChartShadowBlur(getChartShadowBlur());

              //设置字体样式
              setChartFontStyleBtn(getChartFontStyle(sessionStorage['currentChartSelected']));

              //设置文字高度
              setChartLineHeight(getChartLineHeight());

              //设置文字间距
              setChartLetterSpacing(getChartLetterSpacing());
          });

          //设计区域被双击时
          $('.droppable').on(function(){
              sessionStorage['currentChartSelected']='none';//置当前选择的流程图框为空
              $('#B,#I,#U').removeClass('fl-font-style-active');//置当前字体样式选择器为空
              $('#btn-align-center,#btn-align-left,#btn-align-right,#btn-align-none').removeClass('fl-align-style-active');//置当前对齐方式为空
          });

          //页面顶部工具栏选择事件
          $('.line-select-div').on('click','.top-menu-selector',function(){
              var idSelected=$(this).attr('id').split('-');
              if(idSelected[0]=='line'){
                  setChartLineType(idSelected[1]);
              }else if(idSelected[0]=='align'){
                  if(sessionStorage['currentChartSelected']!='none'){
                      setChartTextAlign(sessionStorage['currentChartSelected'],idSelected[1]);
                  }else{
                      setChartTextAlign('',idSelected[1]);
                  }

              }
          });

          //设计区域元素被拖动时,触发同步坐标
         /** $(".droppable").droppable({
            activate:function(event,ui){
              console.log('sdsd');
              //console.log(this);
              setChartLocation($(this).offset().top,$(this).offset().left);
            }
          });*/

          $(".draggable").draggable({
              start:function(){
                  console.log('start');
              },
              drag:function(){
                  console.log('drag');
              },
              stop:function(){
                  console.log('stop');
              }
          });

          //*****************右侧属性面板内容改变同步到设计区域******************

          ////////预加载
          jQuery(function($){
              txtValue=$(".chart-location-form").val();
              ////////    给txtbox绑定键盘事件
              $(".chart-location-form").bind("keydown",function(){
                  var currentValue=$(this).val();
                  console.log(1111);
                  console.log(currentValue);
                  var currentID=$(this).attr('id');
                  if(currentValue!=txtValue){
                      switch(currentID){
                          case 'chart-font-display'://字体
                              setChartDesignFont(currentValue);
                              break;
                          case 'chart-font-size-display'://字体大小
                              setChartDesignFontSize(currentValue*10);
                              break;
                          case 'chart-align-display'://字体对齐样式
                              setChartDesignFontAlign(currentValue);
                              break;
                          case 'chart-font-color-display'://字体颜色
                              setChartDesignFontColor(currentValue);
                              break;
                          case 'lo-x-display'://top
                              setChartDesignTop(currentValue*10);
                              break;
                          case 'lo-y-display'://left
                              setChartDesignLeft(currentValue*10);
                              break;
                          case 'chart-width-display'://宽度
                              setChartDesignWidth(currentValue*10);
                              break;
                          case 'chart-flight-height-display':
                              setChartDesignFlyHeight(currentValue*10);
                              break;
                          case 'chart-flight-speed-display':
                              setChartDesignFlySpeed(currentValue*10);
                              break;
                          case 'chart-height-display'://高度
                              setChartDesignHeight(currentValue*10);
                              break;
                          case 'chart-border-display'://框线style
                              setChartDesignBorderRadius(currentValue);
                              break;
                          case 'chart-fill-border-width-display'://框线粗细
                              setChartDesignBorderWidthStyle(currentValue);
                              break;
                          case 'chart-fill-border-color-display'://框线颜色
                              setChartDesignBorderColorStyle(currentValue);
                              break;
                          case 'chart-font-height-display'://文字高度
                              setChartDesignLineHeight(currentValue);
                              break;
                          case 'chart-font-height-display'://文字间距
                              setChartDesignLetterSpacing(currentValue);
                              break;
                          default:
                              break;
                      }
                  }
              });
          });

          //选择框的选择项被改变时触发
          $('.chart-fill-border-selector').change(function(){
              var valSelected=$(this).children('option:selected').val();//selected的值
              setChartDeignBorderLineStyle(valSelected);
          })

          //线条颜色选择器值被改变时触发
          $('#chart-fill-border-color-display').change(function(){
              setChartDesignBorderColorStyle($(this).val());
          });

          //字体颜色选择器值被改变时触发
          $('#chart-font-color-display').change(function(){
              setChartDesignFontColor($(this).val());
          });

          //背景颜色选择器值被改变时触发
          $('#chart-background-color-display').change(function(){
              setChartDesignBackground($(this).val());
          });

          //渐近度被改变时触发
          $('#chart-blur-range-display').change(function(){
              var chartblurDom=document.getElementById('chart-blur-range-display');
              setChartDesignBoxShadow(chartblurDom.value,getChartBlurColorByColorSelector());
          });

          //同步设计区域的流程图框阴影
          function synChartShadowInDesign(){
              h=getChartHShadowBySelector();
              v=getChartVShadowBySelector();
              blur=getChartShadowBlurBySelector();
              spread=getChartShadowSpreadBySelector();
              color=getChartShadowColorBySelector();
              setChartDesignBoxShadowA(h,v,blur,spread,color);
          }

          //垂直阴影改变时触发
          $('#chart-h-shadow-display').change(function(){
              synChartShadowInDesign();
          });

          //水平阴影改变时触发
          $('#chart-v-shadow-display').change(function(){
              synChartShadowInDesign();
          });

          //模糊距离改变时触发
          $('#chart-shadow-blur-display').change(function(){
              synChartShadowInDesign();
          });

          //阴影尺寸改变时触发
          $('#chart-shadow-spread-display').change(function(){
              synChartShadowInDesign();
          });

          //阴影颜色选择器改变时触发
          $('#chart-shadow-color-display').change(function(){
              synChartShadowInDesign();
          });

          ////目标选择框文本发生更改时触发的事件,根据ID不同

          //$(".chart-fill-border-selector option:selected").attr('value')


          //*****************右侧属性面板内容改变同步到设计区域******************

          //删除连接线
          jsPlumb.bind("click",function(conn,originalEvent){
              if(confirm("确定删除吗?")){
                  jsPlumb.detach(conn);
              }
          });

        // 连接事件监听
          jsPlumb.bind("connection",function(info){
          var sourcePoint = info.sourceEndpoint.endpoint;
          var targetPoint = info.targetEndpoint.endpoint;
          console.log(info);
          // 获取阀值
          var threshold = $('#chart-threshold-display').val();
          var distance = pointDistance(sourcePoint,targetPoint);

          if (distance>threshold){
            alert(' 警告: 链接的两个部件距离超过了阀值')
          }

        });

          //DOCUMENT快捷键操作
          $(document).on("keydown", function(event){
              if(event.ctrlKey && event.which==90){
                  //按下 CTRL+Z 进行撤销操作
                  var rareOperation=chartRareOperationStack.pop();//取出用户最近一次的操作
                  var operationJSON=chartOperationStack[rareOperation].pop();//根据用户最后一次进行的操作弹出最近一次的流程框图数据
                  operationJSON=JSON.parse(operationJSON);
                  var chartOperationData=operationJSON['block'][0];
                  switch(rareOperation){
                      case 'delete':
                          //用户操作为删除,撤销操作为添加
                          addNewChart('.chart-design',chartOperationData['BlockId']+sessionStorage['idIndex']+sessionStorage['currentChartAmount'],chartOperationData['BlockX'],chartOperationData['BlockY'],chartOperationData['BlockContent'],true);
                          break;
                      case 'add':
                          //用户操作为添加,撤销操作为删除
                          deleteChart(chartOperationData['BlockId'],true);
                          break;
                      case 'paste':
                          //用户操作为粘贴,撤销操作为删除
                          deleteChart(chartOperationData['BlockId'],true);
                          break;
                  }
              }
              if(event.ctrlKey && event.which==67){
                  //CTRL+C 进行复制部件操作
                  if(sessionStorage['currentChartSelected']!='none'){
                      chartOperationStack['copy'].push(getSingleChartJson(sessionStorage['currentChartSelected']));
                      //console.log(sessionStorage['currentChartSelected']);
                      chartRareOperationStack.push('copy');
                  }
              }
              if(event.ctrlKey && event.which==86){
                  //CTRL+V 进行粘贴部件操作
                  var chartCopiedJson=chartOperationStack['copy'][chartOperationStack['copy'].length-1];

                  var unpack=JSON.parse(chartCopiedJson);
                  var chartBlockObj=unpack['block'][0];
                  var chartPastedID=chartBlockObj['BlockId']+sessionStorage['idIndex'];//设置被粘贴部件的新ID

                  var BlockContent=chartBlockObj['BlockContent'];
                  var BlockX=chartBlockObj['BlockX'];
                  var BlockY=chartBlockObj['BlockY'];
                  var width=chartBlockObj['BlockWidth'];
                  var height=chartBlockObj['BlockHeight'];
                  var font=chartBlockObj['BlockFont'];
                  var fontSize=chartBlockObj['BlockFontSize'];
                  var fontAlign=chartBlockObj['BlockFontAlign'];
                  var fontColor=chartBlockObj['BlockFontColor'];
                  var borderRadius=chartBlockObj['BlockBorderRadius'];
                  var backgroundColor=chartBlockObj['BlockBackground'];
                  var fillBlurRange=chartBlockObj['BlockFillBlurRange'];
                  var fillBlurColor=chartBlockObj['BlockFillBlurColor'];
                  var borderStyle=chartBlockObj['BlockBorderStyle'];
                  var borderColor=chartBlockObj['BlockborderColor'];
                  var shadow=chartBlockObj['BlockShadow'];
                  var fontStyle=chartBlockObj['BlockFontStyle'];
                  var fontWeight=chartBlockObj['BlockFontWeight'];
                  var fontUnderline=chartBlockObj['BlockFontUnderline'];
                  var lineHeight=chartBlockObj['BlockLineHeight'];

                  var blockAttr=chartPastedID.split('-')[0];

                  var boxInsetShadowStyle='10px 10px '+fillBlurRange+"px 20px "+fillBlurColor+' inset';

                  if(unpack['connects'].length==0){
                      addNewChart('.chart-design',chartPastedID,chartBlockObj['BlockX'],chartBlockObj['BlockY']-20,chartBlockObj['BlockContent']);
                      $("#"+chartPastedID)
                          .css("left",BlockX)
                          .css("top",BlockY)
                          .css("position","absolute")
                          .css("margin","0px")
                          .css("width",width)
                          .css("height",height)
                          .css('font',font)
                          .css('font-size',fontSize)
                          .css('text-align',fontAlign)
                          .css('color',fontColor)
                          .css('border-radius',borderRadius)
                          .css('background',backgroundColor)
                          .css('box-shadow',boxInsetShadowStyle)
                          .css('border-style',borderStyle)
                          .css('border-color',borderColor)
                          .css('box-shadow',shadow)
                          .css('font-style',fontStyle)
                          .css('font-weight',fontWeight)
                          .css('font-underline',fontUnderline)
                          .css('line-height',lineHeight);
                  }else{

                  }
                  unpack['block'][0]['BlockId']=chartPastedID;
                  chartOperationStack['paste'].push(JSON.stringify(unpack));
                  chartRareOperationStack.push('paste');
              }
              if(event.which==46){
                  //DELETE 进行删除部件操作
                  if(sessionStorage['currentChartSelected']!='none'){
                      if(confirm("确定要删除吗?")){
                          deleteChart(sessionStorage['currentChartSelected']);
                          setChartLocation(0,0);
                          setChartSize(0,0);
                      }
                  }
              }
          });

          //点击空白处或者自身隐藏弹出层，下面分别为滑动和淡出效果。
          $(document).click(function(event){
              $('.line-select').slideUp('fast');
              sessionStorage['topLineSelectIsDisplayed']=false;
              sessionStorage['topAlignSelectIsDisplayed']=false;
          });

          //设置style
          function setEnvironmentStyle(styleName){
              switch(styleName){
                  case 'entertainment':
                      console.log(styleName);
                      $('.droppable').css('background','rgb(173,219,225)');
                      break;
                  case 'enterprises':
                      $('.droppable').css('background','rgb(255,255,255)');
                      break;
                  case 'blue':
                      $('.droppable').css('background','rgb(255,235,190)');
                      break;
                  case 'dark':
                      $('.droppable').css('background','rgb(6,1,0)');
                      break;
                  case 'pink':
                      $('.droppable').css('background','rgb(127,0,185)');
                      break;
              }
          }

        /***
         * 计算两个点之间的距离
         * @param sourcePoint {x:,y:}
         * @param targetPoint {x:,y:}
         */
        function pointDistance (sourcePoint,targetPoint) {
          var absX = Math.abs(targetPoint.x - sourcePoint.x);
          var absY = Math.abs(targetPoint.y - sourcePoint.y);
          return Math.sqrt(Math.pow(absX,2) + Math.pow(absY,2));
        }

          //选择相应的style
          $('.right-style-selector').click(function(){
              var styleName=$(this).attr('id').split('-')[1];
              setEnvironmentStyle(styleName);
          });

          //***********************************元素拖动控制部分************************************
      });
  </script>
</body>
</html>
